<script setup lang="ts">
import type { FormInstance } from 'ant-design-vue';

import { ref, watch } from 'vue';

import { message } from 'ant-design-vue';
import dayjs from 'dayjs';

interface Props {
  visible: boolean;
  customer?: any;
}

interface Emits {
  (e: 'update:visible',value: boolean): void;
  (e: 'success'): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const formRef = ref<FormInstance>();

// 表单数据
const formData = ref({
  cardType: 'membership',
  issueTime: '',
  cardNumber: '',
  cardTypeName: '',
  hasPassword: false,
  password: '',
  supplementaryBalance: 0,
});

// 表单验证规则
const rules = {
  cardNumber: [{ required: true, message: '请输入卡号' }],
  cardTypeName: [{ required: true, message: '请选择卡类型' }],
};

// 监听模态框显示
watch(
  () => props.visible,
  (visible) => {
    if (visible) {
      // 设置发卡时间为当前时间
      formData.value.issueTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
      // 生成卡号
      generateCardNumber();
    }
  },
);

// 方法
const generateCardNumber = () => {
  if (!props.customer) return;

  const existingCards = props.customer.membershipCards || [];
  const lastCard = existingCards[existingCards.length - 1];

  if (lastCard) {
    const lastNumber = Number.parseInt(lastCard.cardNumber);
    formData.value.cardNumber = (lastNumber + 1).toString().padStart(3, '0');
  } else {
    formData.value.cardNumber = '001';
  }
};

const resetForm = () => {
  formData.value = {
    cardType: 'membership',
    issueTime: '',
    cardNumber: '',
    cardTypeName: '',
    hasPassword: false,
    password: '',
    supplementaryBalance: 0,
  };
};

const handleOk = async () => {
  try {
    await formRef.value?.validate();

    // 这里可以调用API保存会员卡数据
    message.success('会员卡创建成功');
    emit('success');
    emit('update:visible', false);
    resetForm();
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};

const handleCancel = () => {
  emit('update:visible', false);
  resetForm();
};
</script>

<template>
  <a-modal
    :open="visible"
    title="添加会员卡"
    width="600px"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form ref="formRef" :model="formData" :rules="rules" layout="vertical">
      <a-form-item label="卡种" name="cardType">
        <a-radio-group v-model:value="formData.cardType">
          <a-radio value="membership">会员卡</a-radio>
          <a-radio value="times">次卡</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="发卡时间">
        <a-input v-model:value="formData.issueTime" disabled />
      </a-form-item>

      <a-form-item label="卡号" name="cardNumber">
        <a-input v-model:value="formData.cardNumber" placeholder="请输入卡号" />
        <div class="form-tip">可于实体卡号一致</div>
      </a-form-item>

      <a-form-item label="卡类型" name="cardTypeName">
        <a-select
          v-model:value="formData.cardTypeName"
          placeholder="请选择卡类型"
        >
          <a-select-option value="金卡">金卡</a-select-option>
          <a-select-option value="银卡">银卡</a-select-option>
          <a-select-option value="普通卡">普通卡</a-select-option>
          <a-select-option value="次卡">次卡</a-select-option>
        </a-select>
        <div class="form-tip">请在【基础设置-会员卡】里编辑卡类型</div>
      </a-form-item>

      <a-form-item label="密码">
        <a-checkbox v-model:checked="formData.hasPassword">设置密码</a-checkbox>
        <a-input
          v-if="formData.hasPassword"
          v-model:value="formData.password"
          placeholder="请输入密码"
          type="password"
          style="margin-top: 8px"
        />
        <div class="form-tip">设置卡密码后,消费时需要进行密码确认</div>
      </a-form-item>

      <a-form-item label="补录余额" name="supplementaryBalance">
        <a-input-number
          v-model:value="formData.supplementaryBalance"
          placeholder="请输入补录余额"
          :min="0"
          :precision="2"
          style="width: 100%"
        />
        <div class="form-tip">用于后期补余额,不入账</div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style scoped>
.form-tip {
  margin-top: 4px;
  font-size: 12px;
  color: #999;
}

:deep(.ant-form-item) {
  margin-bottom: 16px;
}
</style>
